<template>
	<div class="zh-studystatus-import">
		<nav-header>
			<template slot="menuBefore">
                <li><router-link to="/user/studystatus/archives-list" tag="a">档案管理</router-link></li>
				<li class="gap">&gt;</li>
			</template>
		</nav-header>
        
		<div class="zh-import-comter">
				<el-button plain @click="downloadDemo">下载模板</el-button>
			    <uploader 
                    :options="uploadOptions" 
                    :autoStart="false" 
                    ref="uploader" 
                    :file-status-text="statusText" 
                    @files-submitted="fileSubmit"
                    @file-removed="fileRemoved" 
                    @file-success="fileSuccess" 
                    @file-error="fileFail"  
                    class="uploader-example">
				    <uploader-unsupport></uploader-unsupport>
				    <uploader-btn :directory="false" :attrs="attrs" v-if="selectFileShow" :single="true">选择文件</uploader-btn>
				    <uploader-list  v-if="!selectFileShow"></uploader-list>
				</uploader>
				<el-button type="primary" v-if="!selectFileShow" @click="fileUpload" style="margin-top: 10px;">确定导入</el-button>
		</div>
		<div class="zh-import-text">
			<p>注意事项: </p>
			<p>1、Excel表从示例以下开始有效。</p>
			<p>2、表头红色字体为必填项，黑色字体为选填项。</p>
			<p>3、时间格式统一按照2019-01-01格式填写，否则将导入失败。 </p>
			<p>4、国籍为外国国籍时，民族填“无”。</p>
            <p>5、户口性质填：本地城镇、本地农村、非本地城镇、非本地农村。</p>
            <p>6、学生来源分为：走读生、寄读生、借读生、旁听生。</p>
            <p>7、若无残疾，则不用填写残疾类型；若无特殊病例，则不用填写病例类型；非低保或边缘户，不用填低保户相关证件号。</p>
            <p>8、学生特长限制为50字以内，学习经历限制为200字内，超出则系统无法录入。</p>
		</div>
		<div class="zh-import-table">
			<p>例：</p>
			<div class="zh-table">
				<div class="zh-table-contents">
                    <el-table
                        :data="importData"
                        border
                        fixed
                        style="width: 100%">
                        <el-table-column label="基础信息" align="center" show-overflow-tooltip>>
                            <el-table-column
                                prop="1"
                                label="账号"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="2"
                                label="真实姓名"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="3"
                                label="姓名拼音"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="4"
                                label="性别"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="5"
                                label="学号"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="6"
                                label="入学时间"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="7"
                                label="国籍"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="8"
                                label="民族"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="9"
                                label="户口性质"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="10"
                                label="户口所在地"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="11"
                                label="籍贯"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="12"
                                label="联系方式"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="13"
                                label="身份证号"
                                align="center"
                                width="180"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="14"
                                label="居住地址"
                                align="center"
                                width="300"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="15"
                                label="是否流动人口"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="16"
                                label="学生特长及备注"
                                align="center"
                                width="220"
					            show-overflow-tooltip>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="家庭信息" align="center" show-overflow-tooltip>>
                            <el-table-column
                                prop="17"
                                label="家长账号"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="18"
                                label="真实姓名"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="19"
                                label="关系"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="20"
                                label="是否监护人"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="21"
                                label="职务"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="22"
                                label="单位地址"
                                align="center"
                                width="180"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="23"
                                label="国籍"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="24"
                                label="民族"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="25"
                                label="籍贯"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="26"
                                label="户籍所在地"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="27"
                                label="身份证号"
                                align="center"
                                width="180"
					            show-overflow-tooltip>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="来源信息" align="center" show-overflow-tooltip>>
                            <el-table-column
                                prop="28"
                                label="原学校名称"
                                align="center"
                                width="140"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="29"
                                label="入学时间"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="30"
                                label="学生来源"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="31"
                                label="升学准考证号"
                                align="center"
                                width="160"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="32"
                                label="来源地区"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="33"
                                label="学习经历"
                                align="center"
                                width="440"
					            show-overflow-tooltip>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="其他信息" align="center" show-overflow-tooltip>
                            <el-table-column
                                prop="34"
                                label="是否独生子女"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="35"
                                label="是否需要申请资助"
                                align="center"
                                width="140"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="36"
                                label="是否享受一补"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="37"
                                label="是否烈士或优抚子女"
                                align="center"
                                width="150"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="38"
                                label="是否提交真实材料"
                                align="center"
                                width="140"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="39"
                                label="是否孤儿"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="40"
                                label="是否残疾"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="41"
                                label="残疾类型"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="42"
                                label="是否寄宿"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="43"
                                label="是否择校生"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="44"
                                label="是否留守儿童"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="45"
                                label="是否特殊病例学生"
                                align="center"
                                width="140"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="46"
                                label="病例类型"
                                align="center"
                                width="120"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="47"
                                label="是否低保或边缘户"
                                align="center"
                                width="140"
					            show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="48"
                                label="低保或边缘户证件号"
                                align="center"
                                width="150"
					            show-overflow-tooltip>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import {uploaderFileFail, downloadBatchDemo, longTimeMessage} from './../../../tools/tool';

	export default {
	    data() {
		    return {
		    	messageObj:{},
		    	statusText: {
			      	success: '上传成功',  
			      	error: '上传出错',  
			     	uploading: '正在上传...',  
			      	paused: '暂停',  
			      	waiting: '等待上传'  
				},
				selectFileOrNot:false,  //是否选中文件
			    uploadOrNot:false, 		//是否已经上传
			    uploadInfo:{
					file_name:'',
					file_path:'',
					file_size:0
				},
				attrs: {
			      	accept: ['application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
			    },
		    	uploadOptions: {
			          target: this.BASE_URL+'/api/user/vue_userdemo_upload',
			          testChunks: false,
			          headers:{Authorization : `Bearer `+this.$g.access_token},
			    },
		        fileList: [],
	            rules: {
	      		},
	      		selectFileShow:true,//是否显示选择文件按钮
				uploadRetryTimes:100,//文件最大重传次数
				importData: [
                    {
                        1: 'zhangxiaowei',
                        2: '张小伟',
                        3: 'zhangxiaowei',
                        4: '男',
                        5: '20181013',
                        6: '2018-09-01',
                        7: '中国',
                        8: '汉族',
                        9: '本地城镇',
                        10: '广州番禺区',
                        11: '广东惠州',
                        12: '18945264230',
                        13: '352225200110253246',
                        14: '广州番禺区东艺路金山谷花园二期3栋1206',
                        15: '否',
                        16: '英语口语流利，会钢琴、小提琴',
                        17: 'zhangwei',
                        18: '张伟',
                        19: '父子',
                        20: '是',
                        21: '公务员',
                        22: '广州番禺区东艺路街道办',
                        23: '中国',
                        24: '汉族',
                        25: '广东惠州',
                        26: '广州番禺区',
                        27: '352225197006081125',
                        28: '广州番禺阳光中学',
                        29: '2019-09-01',
                        30: '走读生',
                        31: '3102648594154213',
                        32: '广州海珠区',
                        33: '2016年入学，在番禺阳光中学读初一，后于2018年9月转入本校',
                        34: '是',
                        35: '否',
                        36: '否',
                        37: '否',
                        38: '是',
                        39: '否',
                        40: '否',
                        41: '',
                        42: '否',
                        43: '是',
                        44: '否',
                        45: '否',
                        46: '',
                        47: '否',
                        48: ''
                    }
                ],
                excelUploader: null, // 上传组件引用
	      	}
        },
        mounted () {
            this.$nextTick(() => {  
                this.excelUploader = this.$refs.uploader.uploader; 
            })  
		},
	    methods: {
            /**
             * 下载导出模板
             */
	    	downloadDemo(){
                let url = this.BASE_URL+'/index/resource/studystatus_import_demo';
                downloadBatchDemo(url);
	    	},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if( this.selectFileOrNot ){
							this.fileUpload();
						}else{
							this.resourceSave();
						}
					} else {
						return false;
					}
				});
			},
	        resourceSave(){
				let resourceParam = {};
				if( this.uploadOrNot ) {
					resourceParam.path = this.uploadInfo.file_path;
				}
				resourceParam.class_id = this.$route.params.id;
            	let success = ( data=>{
            		this.$message.success(data.msg);
                    
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1000);
            	})
            	let fail = (res => {
                    longTimeMessage(this, res, 15000);
            	}) 
            	
				this.$ajax.post('api/studystatus/studystatus_import',resourceParam,{func:{success:success,fail:fail}})	
			},
			//上传成功的事件  
			fileSuccess (rootFile, file, message, chunk) { 
				this.selectFileShow = true;
                var mess = eval('(' + message + ')');
                mess = handleResponseData( mess );
                
			 	if(parseInt( mess.data.status ) ===1 ){
			  		this.uploadOrNot = true;
			  		this.uploadInfo.file_name = mess.data.file_name;
			  		this.uploadInfo.file_path = mess.data.file_path;
			  		this.uploadInfo.post_fix = mess.data.post_fix;
			  		
			  		this.resourceSave();
                }
                this.excelUploader.removeFile(file);
			},
			fileFail(rootFile, file, message, chunk) {
                uploaderFileFail(this, this.excelUploader, file, message);
			},
			//过滤文件格式
			fileSubmit(files, fileList, event){
				for (var i = 0 ; i < fileList.length ; i++ ) {
                    if( this.excelUploader.fileList.length  > 1  ){
                        //删除第一张图片
                        this.excelUploader.removeFile( this.excelUploader.fileList[0] );
                    }
                    this.uploadInfo.file_size = fileList[i].size;
                    this.selectFileOrNot = true;
                    this.selectFileShow = false;
				}
			},
			fileRemoved(file){
				this.selectFileOrNot = false;
				this.selectFileShow = true;
			},
			fileUpload(){
				this.excelUploader.upload();
			},
			back(n){
				this.$router.go(n);	
			},
	    },
		destroyed(to, from, next) {
			this.$message.closeAll();
		},
	}
</script>
<style lang="scss">
	.zh-studystatus-import {
		.zh-import-comter {
			margin-top: 20px;
		}
		.uploader-example {
			margin-top: 20px;
		}
		.zh-import-text {
			font-size: 12px;
		    color: #999;
		    line-height: 30px;
		    margin: 20px;
		    p {
		    	margin: 0;
		    }
		    span {
			    color: red;
			}
		}
		.zh-import-table {
			p {
				font-size: 16px;
				margin-bottom: 20px;
			}
		}
		.uploader-list {
		    .uploader-file-pause {
		      display: none !important;
		    }
		    .uploader-file-status {
		      text-indent: 0;
		    }
 		}

        .el-table__header-wrapper table thead {
            tr:first-child {
                th:not(:last-child) {
                    border-right: 1px solid #000;
                }

                th{
                    border-bottom: none;
                }
            }

            tr:last-child {
                th:first-child,
                th:nth-child(17) {
                    color: red;
                }

                th:nth-child(16),
                th:nth-child(27),
                th:nth-child(33) {
                     border-right: 1px solid #000;
                }
            }
        }
	}
</style>